<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>
<body>
    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //https://source.unsplash.com/500x400/?car

        class Image extends React.Component {
            //4.
            render(){
                console.log('4-子组件更新 - 渲染中...')
                return <img src={this.props.src} alt="" />
            }

            //1. component 组件  will 将要  recevie 接收  props 属性
            componentWillReceiveProps(){
                console.log('1-子组件更新 - 将要接收到外部传入的数据componentWillRecevieProps');
            }
            //2.  
            shouldComponentUpdate(){
                console.log('2-子组件更新 - 组将应该要更新 shouldComponentUpdate');
                return true;
            }
            //3. 
            componentWillUpdate(){
                console.log('3-子组件更新 - 组件将要更新 componentWillUpdate');
            }

            //5. 组件完成更新
            componentDidUpdate(){
                console.log('5-子组件更新 - 组件完成更新 componentDidUpdate')
            }
        }

        class App extends React.Component{
            state = {
                url: 'https://source.unsplash.com/500x400/?car'
            }

            render(){
                //问题  这里有没有问题 .  这里有问题, 不能直接调用 setState
                // this.setState({
                //     url: 'https://source.unsplash.com/500x400/?car'
                // })
                
                return <div>
                        <button keyword="car" onClick={this.change}>汽车</button>
                        <button keyword="city" onClick={this.change}>城市</button>
                        <button keyword="animal" onClick={this.change}>动物</button>
                        <hr /> 
                        <Image src={this.state.url} />
                    </div>
            }

            change = (e) => {
                //获取事件源身上 keyword 属性的值
                let keyword = e.target.getAttribute('keyword');
                this.setState({
                    url: 'https://source.unsplash.com/500x400/?'+keyword
                })
            }
        }

        //渲染 
        ReactDOM.render(<App />, document.querySelector('#root'));

    </script>
</body>
</html>